
/* public */
.icon {
   width: 1em; height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}

/* 字体大小 */
.font-0{font-size:0;}
.font-14{font-size:14px;}
.font-16{font-size:16px;}
.font-18{font-size:18px;}
.font-20{font-size:20px;}
.font-22{font-size:22px;}
.font-24{font-size: 24px;}

/* 公共颜色 */
.bgwhite{background:#fff !important;}
.common_green{color:#32b16c;}		//通用绿
.yellow{color: #ffc108;}			//黄色
.warning{color: #f00;}				//警告
.c000{color: #000;}					//黑色
.c333{color: #333;}
.c666{color: #666;}
.c999{color: #999;}
.cfff{color: #fff;}

/* 公共class */
.commonWrap{
  width:1200px;
  margin-left:auto;
  margin-right:auto;
}
.inblock{display: inline-block;}
.show{display:block;}
.hide{display:none;}
.fontSun{font-family:Sim Sun !important;}
.fontYaHei{font-family:Microsoft YaHei !important;}
.fontArial{font-family: Arial !important;}
.clear:after{
  content:'';
  display:block;
  clear:both;
  height:0;
}
.clear{*zoom:1;}
.tac{text-align:center;}
.tal{text-align:left;}
.tar{text-align:right;}
.prel{position:relative;}
.pabs{position:absolute;}
.fixed{position:fixed;}
.fl{float:left;}
.fr{float:right;}
//文字溢出隐藏,	显示省略号
.txtOverflow{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
input.warning{border-color:#f00 !important;}
pre{display:block;
  padding:10px;
  margin:7px 30px;
  font-size:13px;
  line-height:1.42857143;
  color:#333;
  word-break:break-all;
  word-wrap:break-word;
  background:#f5f5f5;
  border:1px solid #ccc;
  border-radius:4px;
  white-space:normal;
  code{display:block;
    white-space:pre;
    border-radius:5px;
    overflow-x:auto;
  }
}
/* 公共margin */
.margin_t10{margin-top:10px;}
.margin_t20{margin-top:20px;}
.magin_b10{margin-bottom:10px;}
.magin_b20{margin-bottom:20px;}
.padding10{padding:10px;}

// 弹窗样式
.layer, .overlayer{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:101;
}

.overlayer{background: rgba(0,0,0,0.4);}

.layerPop{
  position: fixed;
  top:50%;left:50%;
  z-index: 102;
  margin-top:-50px;
  border-radius:4px;
  background:#f8f8f8;
  .layerTit{
    line-height:30px;
    padding:5px 10px;
  }
  .layerContent{
    padding:15px;
    background: #fff;
  }
  .layerBtns{
    padding:10px;
    text-align: center;
    border-top:1px dashed #ccc;
  }
  .popBtn{
    margin-left:10px;
    margin-right:10px;
    display: inline-block;
    height: 26px;
    padding:0 20px;
    border-radius:3px;
    border:1px solid transparent;
    color: #fff;
  }
}

.alertPop{
  .layerPop{
    width: 350px;
    margin-left:-175px;
  }
  .layerTit{
    border-bottom:1px solid #d1d1d1;
  }
}

.confirmPop{
  .layerPop{
    width: 400px;
    margin-left:-200px;
  }
  .layerTit{
    border-bottom:1px solid #d1d1d1;
  }
}

html.layerShow, html.layerShow body{
  height: 100%;
  overflow: hidden;
}

.fade-enter-active, .fade-leave-active {transition:opacity .2s;}
.fade-enter, .fade-leave-to {opacity: 0;}

.vertop{
  display: inline-block;
  vertical-align:top;
}

// btns
.btn{
  color: #fff;
  border-radius:3px;
  padding:0px 12px;
  text-align:center;
  white-space:normal;
  border:1px solid transparent;
  height: 26px;
  line-height:24px;
  font-size:12px;
  cursor:pointer;
}

a.btn{text-decoration:none;}

// 灰色按钮
.btn_default{
  border:1px solid #e5e5e5;
  background: #f5f5f5;
  color: #333;
  &:hover{
    background: #e5e5e5;
    text-decoration:none;
  }
}

.btn_ok{
  background:#32b16c;
  border-color:#169F85;
  &:hover{background:#169F85;}
}

.btn_cancel, .btn_del{
  background:#337ab7;
  border-color:#2e6da4;
  &:hover{background:#2e6da4;}
}

// .switch_btn
.switch_btn{
  width: 34px;
  height: 22px;
  user-select:none;
  border:1px solid #dfdfdf;
  background-color:rgb(255, 255, 255);
  box-shadow:rgb(223, 223, 223) 0 0 0 0 inset;
  transition:border 0.4s, box-shadow 0.4s;
  border-radius:20px;
  position:relative;
  @extend .vertop;
  cursor:pointer;
  &.disabled{
    opacity:.5;
    cursor: not-allowed;
  }
  &.checked{
    border-color:rgb(38, 185, 154);
    box-shadow:rgb(38, 185, 154) 0 0 0 11px inset;
    transition:border 0.4s, box-shadow 0.3s, background-color 1s;
    small{left:12px;
      background:#fff;
    }
  }
  small{
    width: 20px;
    height: 20px;
    background:#fff;
    border-radius:50%;
    box-shadow:0 1px 3px rgba(0,0,0,0.4);
    transition:background-color 0.4s, left 0.2s;
    position:absolute;
    top:0;left:0;
  }
}

input:checked{
  & + .switch_btn{
    border-color:rgb(38, 185, 154);
    box-shadow:rgb(38, 185, 154) 0 0 0 11px inset;
    transition:border 0.4s, box-shadow 0.3s, background-color .4s;
    small{left:12px;
      background:#fff;
    }
  }
}

// tabs
.tab_group{
  .tab_n{
    display: inline-block;
    vertical-align:top;
  }
  .pane{
    display:none;
    &.on{display:block;}
    .dt, .dd{@extend .vertop;}

  }
}

/* 公共表格 */
.datatable{
  width:100%;
  border:1px solid #ddd;
  .sorting{white-space:nowrap;
    @extend .tac;
  }
  .odd{background:#f9f9f9;}
  th, td{padding:5px 10px;
    text-align:left;
    border:1px solid #ddd;
  }
  .action{text-align:center;}
}


.label{
  @extend .vertop;
  margin-right:10px;
  cursor: pointer;
  &::before{
    content:'';
    display: inline-block;
    width: 10px;
    height:10px;
    background:#fff;
    border:1px solid #999;
    margin-right:5px;
    border-radius:3px;
  }
}

.checkbox, .radio{
  &.on::before{
    background:#169F85;
  }
}

